<template>
	<view class="elm">
		<view class="top">
			<view class="topm" :style="{'padding-top': height * 1   +  'px'}">
				<!--<view class="topmt" :style="{'padding-top': height * 1   +  'px'}"></view><-->
				<view class="pr tc topmt">
					<view class="img-box" @click="navgateBack">
						<image src="../../static/img/other/to-back.png" mode="heightFix"></image>
					</view>

					<text>饿了么外卖</text>
				</view>
				<view class="tab flex-between">
					<image src="../../static/img/other/icon7b.png" class="icon7b" mode=""></image>
					<view class="tabm medium" @click="tiao_elm">外卖</view>
					<view class="tabm medium now">果蔬</view>
				</view>
			</view>
			<!--topm end-->
			<view class="flex-end topmb" :style="{'padding-top': height * 1   +  'px'}">
				<image src="/static/img/other/img33.png" style="height:309rpx;width: 684rpx;"></image>
			</view>
		</view>
		<!--top end-->
		<div class="box">
			<image src="../../static/img/other/img3b.png" style="width: 100%;" mode="widthFix"></image>
			<!-- <view class="wxpic"></view> -->
			<view class="golink">领红包点外卖</view>
		</div>
		<view class="pt30 pl20 lh22 f22 medium" style="color: #EAF675;">注意事项</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
			};
		}, //data
		components: {


		}, // components
		onShow() {
			this.$nextTick(() => {
				let menu = uni.getMenuButtonBoundingClientRect()
				this.height = menu.top
			})

		}, //onShow
		methods: {
			//返回
			navgateBack() {
				uni.navigateBack()
			},
			//饿了么果蔬
			tiao_elm() {
				uni.navigateTo({
					url: '/subpages/take/elm',
				})
			},
		}, //methods
	}
</script>

<style>
	.elm {
		min-height: 100vh;
		overflow: hidden;
		background-color: #A6CF44;
	}

	.top {
		position: relative;
	}

	.topm {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		overflow: hidden;
	}

	.topmt {
		position: relative;
		text-align: center;
		font-size: 34rpx;
		padding-bottom: 24rpx;
		padding-left: 24rpx;
	}

	.topmt text {
		color: #fff;
		line-height: 58rpx;
	}

	.topmta {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #00A4E9;
		height: 58rpx;
	}

	.img-box {
		padding-right: 20rpx;
		position: absolute;
		left: 0;
		top: 9rpx;
	}

	.img-box image {
		width: 40rpx;
		height: 40rpx;
	}

	.tab {
		width: 370rpx;
		height: 50rpx;
		background: rgba(194, 229, 110, 0.5);
		border-radius: 10rpx;
		margin: 0 auto;
		position: relative;
	}

	.tabm {
		width: 50%;
		text-align: center;
		color: #D5F094;
		font-size: 26rpx;
		line-height: 50rpx;
		position: relative;
		z-index: 2;
	}

	.tabm.now {
		color: #fff;
	}

	.topmb {
		margin-top: 132rpx;
	}

	.icon7b {
		position: absolute;
		right: 0;
		top: 0;
		height: 50rpx;
		width: 193rpx;
		z-index: 1;
	}

	.box {
		margin: 0 20rpx;
		position: relative;
		z-index: 10;
	}

	.golink {
		width: 538rpx;
		height: 86rpx;
		border-radius: 43rpx;
		position: absolute;
		left: 50%;
		margin-left: -269rpx;
		bottom: 95rpx;
		background: linear-gradient(0deg, #769B1A 0%, #98CB1F 100%);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.wxpic {
		width: 260rpx;
		height: 260rpx;
		position: absolute;
		left: 50%;
		margin-left: -130rpx;
		bottom: 168rpx;
		background: #757575;
	}
</style>
